Type.registerNamespace('OpenPhotoAlbum.Controls');

OpenPhotoAlbum.Controls.PostPad = function(element) {

    OpenPhotoAlbum.Controls.PostPad.initializeBase(this, [element]);

    this._post = null;
    this._postWidth = null;
    this._postHeight = null;
    this._upload = null;
    this._wait = null;
    this._padX = null;
    this._padY = null;
    this._padWidth = null;
    this._padHeight = null;
    this._postWidth = null;
    this._postHeight = null;
    this._dragging = null;
    this._clickHooked = null;

    this._SubmitButtonText = null;
    this._UniqueID = null;
    this._CancelButtonText = null;
    this._WaitText = null;
    this._SelectText = null;
    this._ChooseLocationText = null;
    this._Angle = null;
    this._CanvasUrl = null;
    this._PostPadWidth = null;
    this._PostPadHeight = null;
}

OpenPhotoAlbum.Controls.PostPad.prototype = {

    initialize: function() {
        OpenPhotoAlbum.Controls.PostPad.callBaseMethod(this, 'initialize');

        this._element.style.width = this._PostPadWidth + 'px';
        this._element.style.height = this._PostPadHeight + 'px';
        this._element.style.backgroundImage = String.format('url(\'{0}\')', this._CanvasUrl);

        var bounds = Sys.UI.DomElement.getBounds(this._element);
        this._padX = bounds.x;
        this._padY = bounds.y;
        this._padWidth = bounds.width;
        this._padHeight = bounds.height;

        this._postWidth = 200;
        this._postHeight = 150;
        this._post = document.createElement('div');
        this._post.id = this._element.id + '_post';
        this._post.style.display = 'block';
        this._post.style.position = 'absolute';
        this._post.style.width = this._postWidth + 'px';
        this._post.style.height = this._postHeight + 'px';
        this._post.style.backgroundColor = 'green';
        this._post.innerHTML = this._ChooseLocationText;
        this._element.appendChild(this._post);

        Sys.UI.DomElement.setLocation(
            this._post,
            this._padX + this._padWidth - this._postWidth,
            this._padY + this._padHeight - this._postHeight);

        this._dragging = true;

        this._clickHooked = false;

        $addHandler(this._element, 'mousemove', Function.createDelegate(this, this._onMouseMove));
    },

    dispose: function() {
        $clearHandlers(this._post);
        $clearHandlers(this._element);

        OpenPhotoAlbum.Controls.PostPad.callBaseMethod(this, 'dispose');
    },

    _hookClickEvent: function() {
        if (this._clickHooked) { return; }

        this._clickHooked = true;
        $addHandler(this._post, 'click', Function.createDelegate(this, this._onClick));
    },

    _unhookClickEvent: function() {
        $clearHandlers(this._post);
        this._clickHooked = false;
    },

    _onMouseMove: function(e) {
        if (!this._dragging) {
            return;
        }
        if (this._postWidth == null || this._postHeight == null) {
            var bounds = Sys.UI.DomElement.getBounds(this._post);
            this._postWidth = bounds.width;
            this._postHeight = bounds.height;
        }
        if (e.clientY < this._padY
			|| e.clientX > this._padX + this._padWidth
			|| e.clientY > this._padY + this._padHeight
			|| e.clientX < this._padX) {
            return;
        }
        var x = parseInt(e.clientX - this._postWidth / 2);
        if (x < this._padX) {
            x = this._padX;
        }
        else if (x > this._padX + this._padWidth - this._postWidth) {
            x = this._padX + this._padWidth - this._postWidth;
        }
        var y = parseInt(e.clientY - this._postHeight / 2);
        if (y < this._padY) {
            y = this._padY;
        }
        else if (y > this._padY + this._padHeight - this._postHeight) {
            y = this._padY + this._padHeight - this._postHeight;
        }
        Sys.UI.DomElement.setLocation(this._post, x, y);

        this._hookClickEvent();
    },

    _onClick: function() {
        if (!this._dragging) { return; }
        this._dragging = false;
        this._unhookClickEvent();
        var bounds = Sys.UI.DomElement.getBounds(this._post);
        bounds.x -= this._padX;
        bounds.y -= this._padY;
        var eventArgs = new Sys.EventArgs();
        eventArgs.bounds = bounds;
        this._raiseEvent('OnClientPosted', eventArgs);
        this._generateUploadElements();
    },

    _generateUploadElements: function() {
        var html = '';

        var uploadId = this._element.id + '_upload';
        html += String.format('<span id="{0}">', uploadId);

        html += String.format('<div>{0}</div>', this._SelectText);

        var inputId = this._element.id + '_input';
        html += String.format('<input type="file" name="{0}" id="{0}" />', inputId);

        var submitButtonId = this._element.id + '_submit';
        html += String.format('<input type="button" id="{0}" value="{1}" />', submitButtonId, this._SubmitButtonText);

        var cancelButtonId = this._element.id + '_cancel';
        html += String.format('<input type="button" id="{0}" value="{1}" />', cancelButtonId, this._CancelButtonText);

        html += '</span>';

        var waitId = this._element.id + '_wait';
        html += String.format('<span id="{0}">{1}</span>', waitId, this._WaitText);

        this._post.innerHTML = html;

        $addHandler($get(submitButtonId), 'click', Function.createDelegate(this, this._onSubmitButtonClick));
        $addHandler($get(cancelButtonId), 'click', Function.createDelegate(this, this._onCancelButtonClick));
        this._upload = $get(uploadId);
        this._wait = $get(waitId);
        this._wait.style.display = 'none';
    },

    _onSubmitButtonClick: function() {
        this._dragging = false;
        this._upload.style.display = 'none';
        this._wait.style.display = '';
        var bounds = Sys.UI.DomElement.getBounds(this._post);
        var args = String.format('UploadPostedPhoto|{0}|{1}|{2}', bounds.x - this._padX, bounds.y - this._padY, this._Angle);
        this._raiseEvent('OnClientRequestUploading', args);
        __doPostBack(this._UniqueID, args);
    },

    _onCancelButtonClick: function() {
        this._post.innerHTML = this._ChooseLocationText;
        this._dragging = true;
    },

    add_OnClientPosted: function(handler) { this.get_events().addHandler('OnClientPosted', handler); },
    remove_OnClientPosted: function(handler) { this.get_events().removeHandler('OnClientPosted', handler); },

    add_OnClientRequestUploading: function(handler) { this.get_events().addHandler('OnClientRequestUploading', handler); },
    remove_OnClientRequestUploading: function(handler) { this.get_events().removeHandler('OnClientRequestUploading', handler); },

    _raiseEvent: function(eventName, eventArgs) {
        var handler = this.get_events().getHandler(eventName);
        if (handler) {
            if (!eventArgs) {
                eventArgs = new Sys.EventArgs();
            }
            handler(this, eventArgs);
        }
    },

    get_SubmitButtonText: function() { return this._SubmitButtonText; },
    set_SubmitButtonText: function(value) { this._SubmitButtonText = value; },

    get_CancelButtonText: function() { return this._CancelButtonText; },
    set_CancelButtonText: function(value) { this._CancelButtonText = value; },

    get_UniqueID: function() { return this._UniqueID; },
    set_UniqueID: function(value) { this._UniqueID = value; },

    get_DetachText: function() { return this._DetachText; },
    set_DetachText: function(value) { this._DetachText = value; },

    get_WaitText: function() { return this._WaitText; },
    set_WaitText: function(value) { this._WaitText = value; },

    get_SelectText: function() { return this._SelectText; },
    set_SelectText: function(value) { this._SelectText = value; },

    get_ChooseLocationText: function() { return this._ChooseLocationText; },
    set_ChooseLocationText: function(value) { this._ChooseLocationText = value; },

    get_Angle: function() { return this._Angle; },
    set_Angle: function(value) { this._Angle = value; },

    get_CanvasUrl: function() { return this._CanvasUrl; },
    set_CanvasUrl: function(value) { this._CanvasUrl = value; },

    get_PostPadWidth: function() { return this._PostPadWidth; },
    set_PostPadWidth: function(value) { this._PostPadWidth = value; },

    get_PostPadHeight: function() { return this._PostPadHeight; },
    set_PostPadHeight: function(value) { this._PostPadHeight = value; }
}

OpenPhotoAlbum.Controls.PostPad.registerClass('OpenPhotoAlbum.Controls.PostPad', AjaxControlToolkit.ControlBase);
